<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    /**
      vue的nextTick这个方法有什么用

      因为vue更新dom是异步的，
      所以需要一个方法监听vue更新dom这个异步操作的完成
      nextTick的作用就更新dom操作完成后的异步回调
    
    */

    /**
      vue的工作流程是什么样的
    
      1.解析模板，生成render函数
      2.响应监听处理
      3.首次渲染和显示页面，且绑定依赖
      4.data属性变化的时候触发set函数，触发rerender
    */

    /**
      vue的mixin extend和component什么区别

      mixin 
      给vue 原型添加一个属性
      可以直接在vue实例的this拿到这个属性

      extend
      可以看做一个组件构造函数
      传入一个组件option然后返回一个Vue的子类
      只会影响这个子类的实例对象，不会对Vue本身产生影响

      component
      就是把Vue.extend函数new出来的组件实例，
      注册到Vue的Options上。本质是也就是在全局Vue实例的Options
      注册的组件可以全局访问
    */

    /**
     * 
     * vuex为什么在action中可以异步提交数据再mutation中不可以异步提交数据
     * 
     * 
     * Vuex中所有的状态更新的唯一途径都是mutation，.
     * 异步操作通过 Action 来提交 mutation实现，
     * 这样使得我们可以方便地跟踪每一个状态的变化，
     * 从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
     * 
     * 每个mutation执行完成后都会对应到一个新的状态变更，
     * 这样devtools就可以打个快照存下来，
     * 然后就可以实现 time-travel 了。
     * 如果mutation支持异步操作，
     * 就没有办法知道状态是何时更新的，
     * 无法很好的进行状态的追踪，给调试带来困难。
     * 
     * 
    */

    /**
     *  slot,slot-scope,scope
     * 
     *  vue组件插槽
     * 
     * 子组件：
     *  slot为插槽标签
     *  同时插槽标签可以添加 name属性 例如：
     *  <div>组件插槽</div>
     *  <slot :obj='obj' name='a'></slot>
     *  <div>命名插槽</div>
     *  <slot :obj='obj' name='b'></slot>
     * 
     * 父组件：
     * scope 在vue 2.5版本以后已经被slot-scope
     * slot-scope 可以获取绑定在子组件插槽内部的变量（自动过滤name属性）
     * 
     * slot 
     *  当组件内部非一个插槽时就需要用到name属性命名
     *  slot属性就是就是对应插槽命名
     * 例如：
     * <slotComponents>
     *   <div slot="a" slot-scope="scope">
     *     {{scope}}
     *     {{scope.obj.b}}
     *   </div>
     *   <div slot="b">
     *     插槽b
     *   </div>
     * </slotComponents>
     *  
     * 
    */


    /**
     *  keep-alive内置组件
     * 
     * 可以让当前组件或者路由不经历创建和销毁，而是进行缓存，
     * 凡是被keep-alive组件包裹的组件，
     * 除了第一次以外。
     * 不会经历创建和销毁阶段的。
     * 第一次创建后就会缓存到缓存当中
     * 
     * 包裹后新增俩个钩子
     * activated与deactivated
     * 
     * 并且提供两个属性 
     * include与exclude两个属性
     * 
     * 参考：https://www.jb51.net/article/143547.htm 
    */

    /**
     * transition: 过渡的实现原理
     * 给元素添加的css类名动画，监听元素显示隐藏时添加类名实现过渡动画
     * 
    */
  </script>
</body>
</html>